<template>
  <div>
    <el-space>
      <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
      <!-- <el-button type="primary" :icon="Refresh">同步</el-button> -->
      <el-input
        v-model="searchParams.keyStr"
        placeholder="字段名称"
        style="margin-right: 10px"
      />
      <el-button type="primary" :icon="Search" @click="handleSearch"
        >搜索</el-button
      >
      <el-button :icon="Refresh" @click="reset">重置</el-button>
      <el-button
        type="danger"
        :icon="Delete"
        :disabled="selections.length == 0"
        @click="handleDelete"
        >删除</el-button
      >
    </el-space>
    <el-table
      v-loading="loading"
      border
      :data="listData"
      style="margin-top: 10px; min-height: 66vh"
      row-key="id"
      @selection-change="handleRowSelect"
    >
      <el-table-column type="selection" label="排序" />
      <!-- <el-table-column width="100" label="序号" prop="no" align="center" /> -->
      <el-table-column width="100" label="序号" type="SortIndex" />
      <el-table-column width="200" label="字段名称" prop="AttrName" />
      <el-table-column label="计算公式" prop="AttrValue" />
      <el-table-column width="200" label="备注" prop="AttrRemark" />
      <el-table-column width="200" label="操作" align="center">
        <template v-slot="{ row }">
          <el-button link type="primary" @click="handleEdit(row)"
            >编辑</el-button
          >
          <el-button link type="primary" @click="handleAdvanced(row)"
            >高级</el-button
          >
          <el-button link type="danger" @click="handleDelete(row.AttrId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <CalcEditModal
      :isUpdate="isUpdate"
      :open="openEdit"
      :data="currentData"
      @closeModal="openEdit = false"
      @reload="reload"
    />
    <CalcAdvancedModal
      :open="openAdvance"
      :data="advancedInfo"
      @closeModal="openAdvance = false"
      @reload="reload"
    />
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import { Plus, Refresh, Search, Sort, Delete } from "@element-plus/icons-vue";
import Sortable from "sortablejs";
import { createUniqueString } from "@/utils";
import { ElMessage, ElMessageBox } from "element-plus";
import CalcEditModal from "./CalcEditModal.vue";
import CalcAdvancedModal from "./CalcAdvancedModal.vue";
import useOrderAttrStore from "@/store/modules/orderAttrs";
import {
  computeQueryApi,
  computeUpdateApi,
  computeRemoveApi,
} from "@/api/order/attr/index.js";
const orderAttrStore = useOrderAttrStore();
const searchParams = ref({
  keyStr: "",
  pageNum: 1,
  pageSize: 10,
});
const listData = ref([]);
const openEdit = ref(false);
const openAdvance = ref(false);
const isUpdate = ref(false);
const loading = ref(false);
const currentData = ref({});
const advancedInfo = ref({});
const currentAttrsName = ref("");
const selections = ref([]);

watch(
  () => orderAttrStore.currentProductSeries.SeriesId,
  (val) => {
    if (val && !searchParams.value.seriesId) {
      searchParams.value.seriesId =
        orderAttrStore.currentProductSeries.SeriesId;
      getData();
    }
  },
  {
    immediate: true,
  }
);
onMounted(() => {
  // getData();
});
async function getData() {
  loading.value = true;
  const res = await computeQueryApi(searchParams.value);
  listData.value = res.Data;
  searchParams.value.total = res.TotalCount;
  loading.value = false;
}
function handleEdit(row) {
  isUpdate.value = true;
  openEdit.value = true;
  currentData.value = Object.assign({}, row);
}
function handleAdd() {
  isUpdate.value = false;
  openEdit.value = true;
  currentData.value = {
    sort: "",
    attrName: "",
    attrsClassify: "",
    inputMode: "",
    selectList: [],
    inputType: "",
    isMixed: false,
    isVisible: false,
    status: false,
  };
}
async function reload(data, update) {
  searchParams.value.keyStr = "";
  data.seriesId = searchParams.value.seriesId
  const res = await computeUpdateApi(data);
  if (res.IsSuccess) {
    ElMessage.success(update ? "修改成功" : "新增成功");
    getData();
  }
}

function handleDelete(id) {
  ElMessageBox.confirm("确认删除？", "提示", {
    type: "warning",
  })
    .then(async (res) => {
      if (searchParams.value.total > 1) {
        if (typeof id == "number") await computeRemoveApi([id]);
        else await computeRemoveApi(selections.value.map((e) => e.AttrId));
        ElMessage.success("删除成功");
        getData();
      } else {
        ElMessage.warning("至少保留一条数据");
      }
    })
    .catch((error) => {
      console.log(error);
    });
}

function handleAdvanced(row) {
  openAdvance.value = true;

  // 向后端请求高级配置参数
  // 根据row.id请求数据
  advancedInfo.value = {
    presentAttr: row.columnName,
    prefixAttr: "无",
    linkage: "手动输入金额",
  };
}
function handleRowSelect(e) {
  selections.value = e;
}
function handleSearch() {
  getData();
}
function reset() {
  searchParams.value.keyStr = "";
  getData();
}
</script>